<template>
	<view class="/">
		<view class="order-header">
			<view class="search"><uni-search-bar cancelText="搜索" :radius="100" @cancel='onSearch' @confirm="onSearch" @input="onInput"></uni-search-bar></view>
		</view>
		<view class="order-main">
			<ul>
				<li class="pd-10 order-list" v-for='(item,index) in list' :key='index' @click='onShop(item)'>
					<view class="flex margin-bottom_10">
						<view class="product-picture"><image class="img" :src="item.goods_img" mode=""></image></view>
						<view class="flex-1">
							<view>{{item.goods_name}}</view>
							<view class="flex justify-between">
								<view>
									<text class="darkColor">￥</text>
									<text class="darkColor">{{item.online_price}}</text>
								</view>
							</view>
							<text class="tab">预估收益￥{{item.self_proportion}}</text>
						</view>
					</view>
				</li>
			</ul>
		</view>
		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中...</text>
			</block>
		</view>
		<without v-if="!isLoading" :showImg='isIcon' :tip="tip"></without>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import without from '@/components/without.vue';
import {distributeGoods} from '@/mixins/index.js';
import {store} from '@/store/index.js'
export default {
	mixins: [distributeGoods],
	components: { uniSearchBar, without },
	data() {
		return {
			list: [],
			page: 1,
			limit: 10,
			count:'',
			search: '',
			isLoading: false,
			isIcon: true,
			tip: '暂无数据'
		};
	},
	mounted() {
		this.getDistributionGoods(2);
	},
	computed:{
		distributor_id(){
		   return store && store.distributor_id
		} 
	},
	watch: {
		search(n, o) {
			if (!n && o) {
				this.page = 1;
				this.list = [];
				this.getDistributionGoods(2);
			}
		}
	},
	methods: {
		// 搜索
		onSearch() {
			if (!this.search) return;
			this.page = 1;
			this.list = [];
			this.getDistributionGoods(2);
		},
		//
		onInput(e) {
			this.search = e.value;
		},
		
		onShop(item){
			let id = item.id;
			let distributor_id = this.distributor_id;
			uni.navigateTo({
				url:'/pages/product/details/details?id='+id+'&distributor_id='+distributor_id
			})
		}
	},
	onReachBottom() {
		if (this.count > this.list.length) {
			this.isLoading = true;
			this.page++;
			this.getDistributionGoods(2)
		} else {
			this.tip = '已加载全部';
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	background-color: #f6f6f6;
}
.order-main {
	
	margin: 15rpx 25rpx;
}
.product-picture {
	width: 220rpx;
	height: 220rpx;
	margin-right: 15rpx;
	.img {
		border-radius: @border-radius-ms;
	}
}
.tab {
	display: inline-block;
	padding: 6rpx;
	border-radius: @border-radius-ms;
	font-size: 28rpx;
	margin: 8rpx 0;
	color: @darkColor;
	background-color: #ffeded;
}
.order-list {
	background: #fff;
	margin-bottom: 15rpx;
	border-radius: 8px;

}
</style>
